<template>
    <el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
        <el-form :model="form" :rules="rules" size="small" label-width="150px" ref="ruleRefForm" class="refForm">
            <el-form-item label="会员卡名称:" prop="title">
                <el-input v-model="form.title" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="发布状态:" prop="state">
				<el-radio-group v-model="form.state">
					<el-radio :label="0">下架</el-radio>
					<el-radio :label="1">已发布</el-radio>
				</el-radio-group>
				<!-- <span style="margin-left: 10px;">注意：使用时间限制，为当前优惠卡可以有效使用的时间（天数）</span> -->
			</el-form-item>
            <el-form-item label="有效期限（天数）">
                <el-input-number v-model="form.vipDay" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="原价">
                <el-input-number v-model="form.price" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="优惠价">
                <el-input-number v-model="form.prePrice" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="form.sort" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="会员卡说明:" prop="detail">
				<el-input v-model="form.detail" placeholder="请输入会员卡简介" type="textarea" :rows="5" ></el-input>
			</el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">保存</el-button>
                <el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
            </span>
        </template>
    </el-dialog>



</template>

<script>
import {
    computed,
    reactive,
    toRefs,
    ref
} from 'vue'
import {
    ElMessage
} from 'element-plus'
import { create, update } from '/@/api/ums/vipcard'
export default {
    name: 'VipCardDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        title: {
            type: String,
            default: '新增'
        },
        statusOptions:{
            type: Array,
            default: []
        }
    },
    setup(props, context) {
        const {
            dialogDrawer,
            defaultForm,
            statusOptions
        } = toRefs(props)
        const ruleRefForm = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const categorys = computed({
            get: () => categoryOptions.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        let form = computed({
            get: () => defaultForm.value,
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const state = reactive({
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            rules: {
                title: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }]
               
            },
            dialogShopVisible: false
           
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    let data = form.value
                    if (data.id != null && data.id != '') {
                        update(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("修改成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("修改失败");
                            }
                        })
                    }
                    // 新增
                    else {
                        create(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("添加成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("添加失败");
                            }
                        })

                    }
                }
            })

        }
        const resetForm = (formEl) => {
            if (!formEl) return
            context.emit('update:dialogDrawer', false)
            formEl.resetFields()
        }
        //移除商品
        const removeRow = (index) => {
            form.value.qnChoices.splice(index, 1)
        }

        const addChoices = () => {
            if(form.value.type == '4' && form.value.qnChoices.length == 2){
                ElMessage.error("判断题只能添加两条选项");
                return ;
            }

            form.value.qnChoices.push({
                orderNo: 1,
                indexLetter: 'A',
                content: null
            })
        }


        return {
            drawer,
            form,
            submitForm,
            resetForm,
            close,
            ruleRefForm,
            removeRow,
            addChoices,
            categorys,
            ...toRefs(state)
        }
    }

}
</script>

<style>

</style>
